<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>观测天区覆盖比例</title>
    <script src="http://172.28.8.8/gwac/resource/flatui/js/vendor/jquery.min.js"></script>  
    <script src="http://172.28.8.8/gwac/resource/js/plot/jquery.flot.min.js"></script>  
    <script src="http://172.28.8.8/gwac/resource/js/plot/jquery.flot.time.min.js"></script>  
    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        body{
            padding: 10px;
        }
        #placeholder {
            width: 90%;
            height: 80%;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>天区数目覆盖比例统计</h1>
    <h3>GWAC共10个转台，最多同时观测10个不同的天区。当前观测的天区数目除以10即为当前天区覆盖比例</h3>
    <div id="placeholder"></div>
    <script>
    $(document).ready(function() {
        // 发起 AJAX 请求获取 JSON 数据
        $.ajax({
            url: '/obsSky/obsSkyNumByMinutes', // nginx代理需要增加 gwacWebHost 前缀，本地不用增加。
            method: 'GET',
            dataType: 'json',
            success: function(data) {
                var plotData = [];
                for (var i = 0; i < data.length; i++) {
                    var newTime = new Date(data[i].mintime);
                    newTime.setHours(newTime.getHours() + 16);
                    var timestamp = newTime.getTime();
                    var count = parseInt(data[i].sky_id_count)/10;
                    plotData.push([timestamp, count]);
                }

                function drawPlot() {
                    $.plot("#placeholder", [plotData], {
                        xaxis: {
                            mode: "time",
                            timeformat: "%H:%M",
                        },
                        grid: {
                            hoverable: true
                        },  
                    series: {  
                        lines: {  
                            show: true  
                        },  
                        points: {  
                            show: true  
                        }  
                    } 
                    });
                }

                drawPlot();

                // 添加鼠标悬停事件以显示 tooltip
                $("<div id='tooltip'></div>").css({
                    position: "absolute",
                    display: "none",
                    border: "1px solid #fdd",
                    padding: "2px",
                    "background-color": "#fee",
                    opacity: 0.80
                }).appendTo("body");

                $("#placeholder").bind("plothover", function (event, pos, item) {
                    if (item) {
                        var sky_ids_json = data[item.dataIndex].sky_ids_json;

                        const convertStringsToFloats = (arr) => {  
                            return arr.map(str => {  
                                // 分割字符串为每4位一组  
                                const camName = str.slice(0, 4);  
                                const firstHalf = str.slice(4, 8);  
                                const secondHalf = str.slice(8, 12);  
                                
                                // 将每组的字符串转换为浮点数，其中最后一位作为小数部分  
                                const firstFloat = `${firstHalf.slice(0, 3)}.${firstHalf.slice(3)}`;  
                                const secondFloatFlag = secondHalf.slice(0,1);
                                let tflag = "0";
                                if(secondFloatFlag=='1'){
                                    tflag = "-";
                                }
                                const secondFloat = `${tflag}${secondHalf.slice(1, 3)}.${secondHalf.slice(3)}`;  
                                
                                return [camName+'('+firstFloat+', '+secondFloat+")"];  
                            });  
                        };  
                        
                        const result = convertStringsToFloats(sky_ids_json); 

                        var skyIds = result.join("<br/>");
                        $("#tooltip").html("Sky IDs: <br/>" + skyIds)
                            .css({ top: item.pageY + 5, left: item.pageX + 5 })
                            .fadeIn(200);
                    } else {
                        $("#tooltip").hide();
                    }
                });

                // 监听窗口大小变化
                $(window).resize(function() {
                    drawPlot();
                });
            },
            error: function() {
                alert("无法获取数据");
            }
        });
    });
    </script>
</body>
</html>
